<template>
	<view class="chux-travels flex--col">
		<EmptyWarn v-if="inactiveTravels.length === 0">
			你还没有出行订单哦
		</EmptyWarn>
		<view class="travel-list flex--col">
			<TravelItem v-for="(travel,index) in inactiveTravels" :highlight="index === 0" :key="travel.id" :travel="travel"></TravelItem>
		</view>
	</view>
</template>

<script>
	import EmptyWarn from "@/components/EmptyWarn/EmptyWarn.vue"
	import TravelItem from "./TravelItem.vue"
	import * as TravelApi from "@/api/travel/travel.js"
	import {REFRESH_TRAVELS,NOTICE} from "@/core/constant/event.js"
	export default{
		components:{
			TravelItem,
			EmptyWarn
		},
		data(){
			return {
				timer:null,
				inactiveTravels:[]
			}
		},
		methods:{
			getInactiveTravelList(){
				console.log("--------REFRESH_TRAVELS-------")
				this.inactiveTravels = this.$store.getters.inactiveTravels
			},
			refreshList(){
				this.timer = setTimeout(() => {
					this.timer && clearTimeout(this.timer)
					this.getInactiveTravelList()
					this.refreshList()
				},1000*60*2)
			}
		},
		created(){
			uni.$on(REFRESH_TRAVELS,this.getInactiveTravelList)
			uni.$on(NOTICE,this.getInactiveTravelList)
			this.getInactiveTravelList()
		},
		mounted(){
			this.refreshList()
		},
		unmounted(){
			clearTimeout(this.timer)
		}
	}
</script>

<style lang="scss" scoped>
	.text--small-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}

	.chux-travels{
		gap:24px;
	}
	.travel-list{
		width:100%;
		gap:24px;
		text-align: center;
	}


</style>